<template>
	<view class="index">
		<!-- 轮播图组件 -->
		<Swipers 
		swiperUrl="/prod-api/api/activity/rotation/list"
		detailsUrl="/pages/activity/detail?id="
		></Swipers>
		
		<scroll-view scroll-x="true">
			<view 
			v-for="(item,index) in sortList" 
			:key="item.id"
			:class="index==navIndex?'active':''" 
			@click="changeNavindex(index,item.id)">{{item.name}}</view>
		</scroll-view>
		
		<!-- 活动/新闻列表组件 -->
		<view v-for="item in actionList" :key="item.id" class="list">
			<ArticleList 
			:article="item" 
			goDetailsUrl="/pages/activity/detail?id="></ArticleList>
		</view>
	</view>
</template>

<script>
	import {http} from "../../utils/request.js"
	export default {
		data() {
			return {
				sortList:[],
				navIndex:0,
				actionList:[]
			};
		},
		onLoad() {
			this.getSort()
		},
		methods:{
			// 获取活动分类
			getSort(){
				http({
					url:"/prod-api/api/activity/category/list",
				}).then(res=>{
					if(res.data.code==200){
						this.sortList=res.data.data
						// 获取第一个分类id以自动获取活动列表(刚进入未点击分类时)
						this.getList(this.sortList[0].id)
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						})
					}
				})
			},
			// 活动分类选择
			changeNavindex(index,id){
				this.navIndex=index
				this.actionList=[]
				this.getList(id)
			},
			// 获取活动列表
			getList(id){
				http({
					url:"/prod-api/api/activity/activity/list",
					data:{
						categoryId:id
					}
				}).then(res=>{
					if(res.data.code==200){
						this.actionList=res.data.rows
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.index{
	scroll-view{
		border-radius: 25rpx;
		overflow: hidden;
		white-space: nowrap;
		margin: 20rpx 10rpx;
		width: 730rpx;
		
		// 网上复制的代码（去除滑动显示条）
		/deep/ ::-webkit-scrollbar{
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}
		
		view{
			width: 150rpx;
			height: 70rpx;
			background-color: #a9c8f6;
			margin-right: 10rpx;
			display: inline-block;
			text-align: center;
			line-height: 70rpx;
			color: #fff;
			border-radius: 25rpx;
			padding: 0 20rpx;
			&.active{
				background-color: #4c9cff;
			}
		}
	}
	.list{
		padding: 30rpx;
		border-bottom: 1px solid #ccc;
		background-color: #ecf0f1;
	}
}
</style>
